<template>
  <view class="content">
		<view class="mingxi_top">
				<view class="text_title">当月支出：&nbsp;{{monthSpend}}元</view>
				<view class="text_title">
					<picker mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
						<view>月份:&nbsp;&nbsp;{{date}}</view>
					</picker>					
				</view>
		</view>
		<view style="border-radius: 20rpx;width: 95%;height: 30rpx; background-color: antiquewhite;margin: 20rpx 0;">
		</view>
		<view class="title_bu">
			<view class="icon_title" v-for="(item, index) in money_data" :key="index">
				<uni-icons :type="item.icon" size="40"></uni-icons>{{item.name}}:{{item.data}}￥
			</view>
			
		</view>
  </view>
</template>

<script>
export default {
  data() {
	const currentDate = this.getDate({
	  format: true
	})
    return {
		date: currentDate,
		monthSpend:0,
		money_data:[
			{icon:'wallet',name:'本月总价',data:0},
			{icon:'fire',name:'餐饮总价',data:0},
			{icon:'paperplane',name:'交通总价',data:0},
			{icon:'phone',name:'通讯总价',data:0},
			{icon:'cart',name:'购物总价',data:0}
		]
	}
    },
	onReady(){
		this.getdata();
	},
	onShow() {
		this.getdata();
	},
  computed: {
  	startDate() {
  		return this.getDate('start');
  	},
  	endDate() {
  		return this.getDate('end');
  	}
  },
  methods: {
	bindDateChange: function(e) {
			this.date = e.detail.value
			console.log(this.date)
		},
	getdata(){
		const userInfo = uni.getStorageSync('userInfo');
		var m_data={}
		m_data.appid = userInfo.appid		
		m_data.date = this.date
		const res = this.$myRequest({
			url:'/baobiao',
			data:m_data,
			method: 'post'
		})
		res.then((result) => {
			// console.log(result)
			var v_data = result.data.data;
			if (v_data == ''){
				this.monthSpend = 0;
			} else {
				// 本月总价
				var wallet = 0;
				// 餐饮总价
				var fire = 0;
				// 交通总价
				var paperplane = 0;
				// 通讯总价
				var phone = 0;
				// 购物总价
				var cart = 0;
				
				// 获取月总数
				for(var i = 0; i < v_data.length;i++){
						wallet += v_data[i].da_money
					if(v_data[i].da_lei === '餐饮'){
						fire += v_data[i].da_money
					}else if(v_data[i].da_lei === '交通'){
						paperplane += v_data[i].da_money
					}else if(v_data[i].da_lei === '通讯'){
						phone += v_data[i].da_money
					}else if(v_data[i].da_lei === '购物'){
						cart += v_data[i].da_money
					}
				}
				this.monthSpend = wallet;
				this.money_data[0].data = wallet;
				this.money_data[1].data = fire;
				this.money_data[2].data = paperplane;
				this.money_data[3].data = phone;
				this.money_data[4].data = cart;
				
				
				// for(var i = 0; i < v_data.length;i++){
				
				// 	wallet += v_data[i].da_money
				// }
				// console.log(v_data)
				
			}
		})
	},
	getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}`;
		}
	},

};
</script>

<style scoped>
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mingxi_top{
		display: flex;
		justify-content: space-between;
		width: 95%;
		background-color: #ccc;
		margin-top: 20rpx;
		font-size: 30rpx;
		border-radius: 30rpx;
		padding:  20rpx 0;
	}
		
	.text_title{
		color: #e782D7;
		margin: 0 20rpx;
	}
	.title_bu{
		width: 95%;
		background-color: #e782D7;
		height: 600rpx;
		border-radius: 50rpx;
		padding-top: 10rpx;
	}
	.icon_title{
		margin-left: 10rpx;
		margin-top: 10rpx;
		/* text-align: ; */
		font-size: 40rpx;
	}
</style>